import React from 'react';
import style from './blogLayout.less';
import { Layout } from 'antd';
import { useState, useEffect } from 'react';
import { NavLink } from 'umi';
import classnames from 'classnames';
import '../static/layout/iconfont.css';
import RecommendedReading from './RecommendedReading';
import { useDispatch, useSelector } from '@/.umi/plugin-dva/exports';
import IState from '@/modelS/type';

const { Header, Footer, Content } = Layout;

const blogLayout: React.FC = (props) => {
  const [menuList, setMenuList] = useState([
    { title: '文章', url: '/' },
    { title: '归档', url: '/archives' },
    { title: '知识小册', url: '/knowledge' },
    { title: '留言板', url: '/page/msgboard' },
    { title: '关于', url: '/page/about' },
  ]);
  const [icon1, setIcon1] = useState(`${style.menuB} iconfont icon-menu`);
  const dispatch = useDispatch();
  const state = useSelector((state: IState) => state.RecommendedReading);
  const [isSun, setIsSun] = useState(state.isSun);
  const [size, setSize] = useState(document.body.clientWidth);
  const [menuShow, setMenuShow] = useState(false);
  useEffect(() => {
    window.addEventListener('resize', () => {
      setSize(document.body.clientWidth);
    });
  }, []);

  useEffect(() => {
    dispatch({
      type: 'RecommendedReading/changeSun',
      payload: { isSun: isSun },
    });
  }, [isSun]);
  const [icon, setIcon] = useState(`iconfont icon-taiyang ${style.sun}`);
  const [theme, setTheme] = useState(`${style.box} ${style.themea}`);
  const [show, setShow] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  return show ? (
    <div className={style.searchPage}>
      <h1>
        文章搜索
        <span
          className={style.esc}
          onClick={() => {
            setShow(false);
          }}
        >
          esc<span>X</span>
        </span>
      </h1>
      <input
        type="text"
        placeholder="输入关键字，搜索文章"
        value={searchValue}
        onChange={(e) => {
          setSearchValue(e.target.value);
        }}
      />
      <button
        className="iconfont icon-sousuo"
        onClick={() => {
          dispatch({
            type: 'RecommendedReading/getSearchList',
            payload: searchValue,
          });
        }}
      ></button>
      <ul>
        {state.searchList.length
          ? state.searchList.map((item) => {
              return (
                <li
                  key={item.id}
                  onClick={() => {
                    setShow(false);
                  }}
                >
                  <NavLink to={`/Article/Detail?id=${item.id}`}>
                    {item.title}
                  </NavLink>
                </li>
              );
            })
          : ''}
      </ul>
    </div>
  ) : (
    <div className={classnames(theme)}>
      {size < 768 ? (
        <Header className={style.header}>
          <img
            src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png"
            alt=""
          />
          <span
            className={classnames(icon1)}
            onClick={() => {
              if (icon1 === `${style.menuB} iconfont icon-cha`) {
                setIcon1(`${style.menuB} iconfont icon-menu`);
              } else {
                setIcon1(`${style.menuB} iconfont icon-cha`);
              }

              setMenuShow(!menuShow);
            }}
          ></span>
          <ul className={menuShow ? style.menu1 : style.menu}>
            {menuList.map((item, index) => {
              return (
                <li
                  key={item.url}
                  onClick={() => {
                    setMenuShow(false);
                  }}
                >
                  <NavLink
                    className={
                      location.pathname === item.url
                        ? classnames(style.tabChild, style.active)
                        : style.tabChild
                    }
                    to={item.url}
                  >
                    {item.title}
                  </NavLink>
                </li>
              );
            })}
            <li
              onClick={() => {
                setMenuShow(false);
              }}
              className={classnames(
                'iconfont',
                'icon-zhongyingwenqiehuan',
                style.z_e,
              )}
            ></li>
            <li
              className={classnames(icon)}
              onClick={() => {
                setMenuShow(false);

                if (isSun) {
                  setIcon(`iconfont icon-icon-test ${style.moon}`);
                  setTheme(`${style.box} ${style.themeb}`);
                  setIsSun(!state.isSun);
                } else {
                  setIcon(`iconfont icon-taiyang ${style.sun}`);
                  setTheme(`${style.box} ${style.themea}`);
                  setIsSun(!state.isSun);
                }
              }}
            ></li>
            <li
              className={classnames('iconfont', 'icon-sousuo', style.search)}
              onClick={() => {
                setShow(true);
                setMenuShow(false);
                setSearchValue('');
                dispatch({
                  type: 'RecommendedReading/delSearchList',
                });
              }}
            ></li>
          </ul>
        </Header>
      ) : (
        <Header className={style.header}>
          <div className={style.menu}>
            <img
              src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png"
              alt=""
            />
            <div className={style.right}>
              <div className={style.tab}>
                {menuList.map((item, index) => {
                  return (
                    <NavLink
                      className={
                        location.pathname === item.url
                          ? classnames(style.tabChild, style.active)
                          : style.tabChild
                      }
                      to={item.url}
                      key={item.url}
                    >
                      {item.title}
                    </NavLink>
                  );
                })}
              </div>
              <div className={style.light}>
                <span
                  className={classnames(
                    'iconfont',
                    'icon-zhongyingwenqiehuan',
                    style.z_e,
                  )}
                ></span>
                <span
                  className={classnames(icon)}
                  onClick={() => {
                    if (isSun) {
                      setIcon(`iconfont icon-icon-test ${style.moon}`);
                      setTheme(`${style.box} ${style.themeb}`);
                      setIsSun(!state.isSun);
                    } else {
                      setIcon(`iconfont icon-taiyang ${style.sun}`);
                      setTheme(`${style.box} ${style.themea}`);
                      setIsSun(!state.isSun);
                    }
                  }}
                ></span>
                <span
                  className={classnames(
                    'iconfont',
                    'icon-sousuo',
                    style.search,
                  )}
                  onClick={() => {
                    setShow(true);
                    setSearchValue('');
                    dispatch({
                      type: 'RecommendedReading/delSearchList',
                    });
                  }}
                ></span>
              </div>
            </div>
          </div>
        </Header>
      )}
      <Content>
        {/^\/[A-Za-z0-9]*$/.test(location.pathname) ? (
          <div className={style.box2}>
            <div className={style.box1}>{props.children}</div>
            {size < 768 ? (
              ''
            ) : (
              <RecommendedReading key={location.pathname}></RecommendedReading>
            )}
          </div>
        ) : (
          <div className={style.box3}>{props.children}</div>
        )}
      </Content>
      <Footer>
        <div>
          <a
            className={classnames('iconfont', 'icon-wifi')}
            href="https://blog.wipi.tech/rss"
            target="_blank"
          ></a>
          <a
            className={classnames('iconfont', 'icon-git')}
            href="https://github.com/fantasticit/wipi"
            target="_blank"
          ></a>
        </div>
        <p>Designed by Fantasticit . 后台管理</p>
        <p> Copyright © 2021. All Rights Reserved. </p>
        <p> 皖ICP备18005737号 </p>
      </Footer>
    </div>
  );
};

export default blogLayout;
